<template>
<div class="chatbox container">

    <div class="title">
        正在和{{user.username}}聊天
    </div>
    <div class="chatlogs" id="chatLogs">

        <div v-for="message in messages" :key="message.id" :class="getClassName(message)">
            <div class="user-photo">

                <img src="../assets/avatar.jpg" alt="">

            </div>

            <p v-if="message.type==1" class="chat-message">{{message.content}}</p>
            <img v-if="message.type==2" :src="message.content" class="msgImg chat-message">
        </div>

    </div>
    <div class="line"></div>
    <form class="chat-form" v-on:submit="sendMsg">
        <input id="myMessage" v-model="msg">
        <input id="file" type="file" @change="uploadFile">
        <button id="sendbutton" @click="sendMsg" :disabled="!msg">Send</button>
    </form>
</div>
</template>

<script>
import io from 'socket.io-client';

export default {
    name: 'privatechat',
    components: {},
    data() {
        return {
            online: false,
            msg: '',
            socket: io("http://localhost:3000"),
            user: {
                username: 'wzq',
                avatar: '',
                id: '5678'
            },
            current_user: {
                username: 'yy',
                avatar: '',
                id: '1234'
            },
            messages: [],
        }
    },
    computed: {

    },
    methods: {
        uploadFile(e) {
            let file = e.target.files[0];
            if(!file)
                return;
            let fileType = 0;
            if(file.type.indexOf('image')!=-1)
                fileType = 2;
            let reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onload = () => {
                const msg = {
                    type: fileType,
                    from: this.current_user.id,
                    to: this.user.id,
                    content: reader.result,
                }
                window.console.log(msg.type);
                this.socket.emit('msg', msg);
                
            }

        },
        scrollToBottom() {
            let chatLogsDom = document.getElementById("chatLogs");
            chatLogsDom.scrollTop = chatLogsDom.scrollHeight;

            window.console.log(chatLogsDom.scrollTop);
        },
        getClassName(msg) {
            if (msg.from == this.current_user.id)
                return 'chat self';
            else
                return 'chat friend123 ';
        },
        sendMsg() {
            if (!this.msg) {
                alert('发送信息不能为空！');
            }

            const msg = {
                type: 1,
                from: this.current_user.id,
                to: this.user.id,
                content: this.msg
            }
            this.socket.emit('msg', msg);

            this.msg = '';
        }
    },
    created() {
        this.current_user.id = prompt('请输入用户名');
        this.user.id = this.$route.params.id;

        this.socket.on('connected', data => {
            this.online = data.online;
            this.socket.emit('newUser', this.current_user.id);
        })

        this.socket.on('getMessages', data => {
            this.messages = data;
        });

        
        

    },
    mounted() {

        this.scrollToBottom();

        this.socket.on('msg', msg => {

            this.messages.push(msg);
            this.scrollToBottom();

        });

    }
}
</script>

<style scoped>
* {
    /* margin: 0; */
    padding: 0;
    font-family: tahoma, sans-serif;
    box-sizing: border-box;
}

body {
    background: #ff9969;
}

.chatbox {
    /* width: 95%; */

    height: 100%;
    /* background: #F8F8FF; */
    border: solid 2px #F8F8FF;
    padding: 25px;

    box-shadow: 0 3px #ccc;
}

.title {
    position: relative;
    background: #404040;
    font-size: 25px;
    margin: 5px auto;
    padding: 5px 10px;
    border-radius: 5px;
    color: white;
}

.chatlogs {
    padding: 10px;
    /* width: 100%; */
    /* min-height: 450px; */
    height: 75vh;
    overflow-x: hidden;
    overflow-y: scroll;

}

.chatlogs::-webkit-scrollbar {
    width: 10px;
}

.chatlogs::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background: rgba(0, 0, 0, .1);
}

.chat {
    justify-content: right;

    display: flex;
    /* flex-flow:row wrap; */
    align-items: flex-start;
    /* margin: 20px auto; */
    margin-bottom: 20px;

}

.msgImg{
    max-width: 60vw;
    margin-left: 10px;
    border-radius: 5px;
}

/* // Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
    .chat .user-photo {
        width: 30px;
        height: 30px;
    }

    .chat .chat-message {
        font-size: 15px;
        padding: 2px 8px;
        /* width: 85%; */
    }

    .title {
        font-size: 14px;
    }

}

/* // Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) and (max-width: 767.98px) {
    .chat .user-photo {
        width: 50px;
        height: 50px;
    }

    .chat .chat-message {
        font-size: 20px;
        padding: 6px 10px;
        width: 85%;
    }
}

/* // Medium devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991.98px) {
    .chat .user-photo {
        width: 50px;
        height: 50px;
    }

    .chat .chat-message {
        font-size: 20px;
        padding: 8px 15px;
        width: 90%;
    }
}

/* // Large devices (desktops, 992px and up) */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .chat .user-photo {
        width: 80px;
        height: 80px;
    }

    .chat .chat-message {
        font-size: 25px;
        padding: 8px 15px;
        width: 90%;
    }

}

/* // Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .chat .user-photo {
        width: 80px;
        height: 80px;
    }

    .chat .chat-message {
        font-size: 30px;
        padding: 10px 15px;
        width: 90%;
    }
}

.chat .user-photo {
    /* width:60px;
    height: 60px; */
    background: #ccc;
    border-radius: 50%;
    overflow: hidden;

}

.chat .user-photo img {
    width: 100%;
}

.chat .chat-message {

    /* padding: 2px 15px; */
    margin: 0 10px;
    background: #409EFF;
    border-radius: 10px;
    color: #fff;
    /* font-size: 18px; */

    /* width: 74%; */
    word-wrap: break-word;
    word-break: normal;

}

.friend .chat-message {
    background: #1adda4;

}

.self .chat-message {
    background: #1ddced;
    order: -1;
}

.line {
    width: 100%;
    background: #F8F8FF;
    height: 2px;
}

.chat-form {
    width: 100%;
    margin-top: 20px;
    display: flex;
    align-items: center;

}

.chat-form input {
    background: #fbfbfb;
    width: 90%;
    height: 40px;
    border: 2px solid #eee;
    border-radius: 3px;
    resize: none;
    padding: 10px;
    font-size: 18px;
    color: #333;
}

.chat-form input:focus {
    background: #fff;
}

.chat-form input::-webkit-scrollbar {
    width: 10px;
}

.chat-form input::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background: rgba(0, 0, 0, .1);
}

.chat-form button {
    background: #409EFF;
    padding: 2px 14px;
    font-size: 25px;
    color: #fff;
    border: none;
    margin: 0 10px;

    border-radius: 3px;
    box-shadow: 0 3px 0 #409EFF;
    cursor: pointer;

    -webkit-transition: background .2s ease;
    -moz-transition: background .2s ease;
    -o-transition: background .2s ease;
}

.chat-form button:hover {
    background: #13c8d9;
}
</style>
